<template>
  <div class="bianxiedizhi">
    <van-nav-bar
      title="编辑地址页面"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <div class="asyyds">
      <!-- 用户名 -->
      <van-field v-model="name" label="用户名" placeholder="请输入用户名" />
      <!-- 电话号码 -->
      <van-field
        v-model="mode"
        label="电话号码"
        placeholder="请输入电话号码 "
      />
      <!-- 城区 -->
      <van-field
        v-model="chengqu"
        @click="xiyun"
        label="详细城区"
        placeholder="请输入城区 "
      />
      <!-- 详细地址 -->
      <van-field
        v-model="dizhi"
        label="详细地址"
        placeholder="请输入详细地址 "
      />
      <!-- 是否设置去默认地址 -->
      <van-checkbox v-model="checked" shape="square"
        >是否设置为默认地址</van-checkbox
      >
    </div>
    <van-popup v-model="show" position="bottom">
      <van-area title="标题" :area-list="areaList" @confirm="dizhixinxi" />
    </van-popup>
    <!-- 保存按钮 -->
    <van-button class="baocun" @click="xfqyyds" color="red" type="default" block
      >保存</van-button
    >
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { saveAction } from "@/api/地址接口/dizhi.js";
export default {
  name: "Bianxiedizhi",
  data() {
    return {
      name: "",
      mode: "",
      chengqu: "",
      dizhi: "",
      checked: true,
      areaList,
      addressId: "",

      show: false,
    };
  },
  methods: {
    xfqyyds() {
      console.log(this.addressId);
      saveAction({
        address: this.chengqu,
        addressId: "",
        checked: this.checked,
        detailadress: this.dizhi,
        openId: localStorage.getItem("openId"),
        telNumber: this.mode,
        userName: this.name,
      }).then((res) => {
        // console.log(res);
      });
    },
    // 地址三联
    dizhixinxi(val) {
      console.log(val);
      var str = val.map((ele) => ele.name).join(" ");
      console.log(str);
      this.chengqu = str;
      this.show = false;
    },
    // 弹框显示
    xiyun() {
      this.show = true;
    },
  },
  mounted() {
    console.log(this.$route.query.id);
    this.addressId = this.$route.query.id;
  },
};
</script>

<style lang="less" scoped>
.bianxiedizhi {
  .asyyds {
    margin-top: 50px;
  }
  //保存按钮
  .baocun {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>